<template>
    <div>
    <el-dialog v-model="dialogVisible" width="80%" align-center :show-close="false" @close="handleClose" draggable destroy-on-close>
        <template #header="{ close }">
            <div class="dialog-header flex justify-between items-center">
                <div>{{ title }}</div>
                <el-icon class="el-icon--left cursor-pointer" @click="close">
                    <CircleCloseFilled color="#fff" />
                </el-icon>
            </div>
        </template>
        <div class="bg-white my-[10px]">
            <BaseHead>基本信息</BaseHead>
            <BaseTable>
                <tr>
                    <td class="td-subname">项目名称</td>
                    <td colspan="6" > {{ ProjectIncomeShow.projectName }}</td>
                </tr>
                <tr>
                    <td class="td-subname">经费卡负责人</td>
                    <td colspan="3" > {{ProjectIncomeShow.feeChargerName }}</td>
                    <td class="td-subname">合同金额</td>
                    <td colspan="3" > {{  FloatDiv(ProjectIncomeShow.feeAuthorize,10000) }}<span> 万元</span></td>
                </tr>
                <tr>
                    <td class="td-subname">未到金额</td>
                    <td colspan="3" > {{ FloatDiv(ProjectIncomeShow.notIncomeFee,10000) }}<span> 万元</span></td>
                </tr>
            </BaseTable>
        </div>
        <div class="bg-white my-[10px]">
            <BaseHead>到账信息</BaseHead>
            <BaseTable>
                <tr>
                    <td class="td-subname">来款单位</td>
                    <td colspan="3" > {{ ProjectIncomeShow.incomeUnitName}}</td>
                    <td class="td-subname">来款类型</td>
                    <td colspan="3" > <CommonLabel :dataList="incomeTypeList" valueKey="code" :value="ProjectIncomeShow.incomeType" />
                    </td>
                </tr>
                <tr>
                    <td class="td-subname">本次入账(万元)</td>
                    <td colspan="3" > {{  FloatDiv(ProjectIncomeShow.incomeFee,10000)}}</td>
                    <td class="td-subname">留校金额</td>
                    <td colspan="3" > {{  FloatDiv(ProjectIncomeShow.schoolFee,10000)}}<span> 万元</span></td>
                </tr>
                <tr>
                    <td class="td-subname">外拨金额</td>
                    <td colspan="3" > {{  FloatDiv(ProjectIncomeShow.outboundFee,10000)}}<span> 万元</span></td>
                    <td class="td-subname">对冲号</td>
                    <td colspan="3" > {{ ProjectIncomeShow.dch}}</td>
                </tr>
                <tr>
                    <td class="td-subname">到账日期</td>
                    <td colspan="3" > {{ ProjectIncomeShow.incomeDate}}</td>
                    <td class="td-subname">经费账号</td>
                    <td colspan="3" > {{ProjectIncomeShow.feeCardNum }}</td>
                </tr>
            </BaseTable>
        </div>
        <div class="bg-white my-[10px]" v-show="manageShow">
            <BaseHead>管理费信息</BaseHead>
            <BaseTable>
                <tr>
                    <td class="td-subname">管理费信息</td>
                    <td class="td-subname" colspan="3">累计扣除管理费(万元)</td>
                    <td class="td-subname" colspan="3">本次扣除管理费(万元)</td>
                </tr>
                <tr v-for="(items, index) in ProjectIncomeShow.manageFee" :key="index">
                    <td class="td-subname">{{ items.subjectName }}</td>
                    <td colspan="3" > {{ FloatDiv(items.splitManageFee,10000) }}</td>
                    <td colspan="3" >{{ FloatDiv(items.subjectFee,10000) }}</td>
                </tr>
            </BaseTable>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <div class="operate-btns">
                    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</div> 
</template>

<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import BaseTable from "@/views/fee/components/BaseTable.vue";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import useCommonFetch from "@/hooks/useCommonFetch";
import { FloatDiv } from "@/utils/pub";
import { getprojectInfo } from "@/api/fee/rz/jfkrz/index.js";
import { ref } from "vue";
const dialogVisible = ref(false);
const manageShow = ref(false);//管理费展示
const showIncomeType = ref(true);//来款类型展示
const incomeTypeList = useCommonFetch("来款类型");
var projectId = "";//项目号
const projectList= ref([]);//项目list
const ProjectIncomeShow = ref({id:""});
const title = computed(() => {
  return "经费查看";
});

const view = async (row) => {
    dialogVisible.value = true;
    if(row != null && row != ""){
        ProjectIncomeShow.value = row;
        initIncomeType();
        initProjectInfo(row.projectId,row.id);
    }
};

defineExpose({view});

/**
 * 初始化到账类型，
 * 横向项目没有到账类型，纵向有，一般校级管理按照纵向管理
 * 
 */
 function initIncomeType(){
    if (ProjectIncomeShow.value.projectClass == 'yfContract') { // 横向项目
        showIncomeType.value = false;
		ProjectIncomeShow.value.incomeType= "mixed";
	}else{
        showIncomeType.value = true;
    }
}

//初始化数据
const initProjectInfo = async (projectId,projectIncomeId)=>{
    let params = {projectId:projectId,projectIncomeId:projectIncomeId};
    try {
        const res = await getprojectInfo(params);
        if (res.code == 200) {
            ProjectIncomeShow.value = res.data;  
            if(res.data.projectClass == "zXProject"){
                manageShow.value = true;
            }
        }
    }catch (error) {
        console.log(error);
    }
}

//关闭弹窗
const handleClose = () => {
  
};

</script>

<style scoped lang="scss">
@import url("@/views/fee/index.scss");
</style>